<template>
  <div class="container">
    <!--面包屑导航-->
    <Breadcrumb :items="['menu.logger', '系统日志']" />
    <query-header @search="search" @reset="reset" />
    <a-card class="general-card">
      <header-operator
        :operators="[]"
        :columns="tableColumns"
        @operator="() => {}"
        @refresh="fetchData"
        @density="(value) => {size = value}"
        @column="(value) => cloneColumns = value"
      />
      <!--列表-->
      <a-table
        row-key="configId"
        :size="size"
        :bordered="{cell:true}"
        :loading="loading"
        :columns="cloneColumns"
        :data="tableData"
        :pagination="pagination"
        @page-change="pageChange"
        @page-size-change="pageSizeChange"
      >

        <template #status="{ record }">
          <a-tag v-if="record.status === 20000" color="#7bc616">成功</a-tag>
          <a-tag v-else color="#f53f3f">失败</a-tag>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, onMounted } from 'vue';
import cloneDeep from 'lodash/cloneDeep';
import useLoading from '@/hooks/loading';
import { loggerLoginList, SysLogLogin } from '@/api/logger/login';
import { PaginationProps } from '@arco-design/web-vue';
import { tableColumns } from '@/views/logger/login/config';
import QueryHeader from '@/views/logger/login/query-header.vue';

const { loading, setLoading } = useLoading(true);

const queryParams = ref();

const size = ref('medium');

const tableData = ref<SysLogLogin[]>([]);

const cloneColumns = ref<any>([]);

const basePagination: PaginationProps = {
  current: 1,
  pageSize: 10,
  showTotal: true,
  showJumper: true,
  showPageSize: true
};

const pagination = reactive({
  ...basePagination
});

const pageChange = (page: number | undefined) => {
  pagination.current = page;
  fetchData();
};

const pageSizeChange = (pageSize: number) => {
  pagination.pageSize = pageSize;
  fetchData();
};

const fetchData = async () => {
  setLoading(true);
  try {
    const params = {
      page: {
        current: pagination.current,
        size: pagination.pageSize
      },
      query: queryParams.value
    };
    const { data } = await loggerLoginList(params);
    tableData.value = data.records;
    pagination.current = Number(data.current);
    pagination.total = Number(data.total);
  } finally {
    setLoading(false);
  }
};

const search = (value: SysLogLogin) => {
  queryParams.value = value;
  fetchData();
};

const reset = () => {
  queryParams.value = {};
  fetchData();
};

onMounted(() => {
  fetchData();
});

watch(
  () => tableColumns.value,
  (val) => {
    cloneColumns.value = cloneDeep(val);
    cloneColumns.value.forEach((item: { checked: boolean; }, index: any) => {
      item.checked = true;
    });
  },
  { deep: true, immediate: true }
);
</script>

<script lang="ts">
export default {
  name: 'LoggerLogin'
};
</script>

<style scoped lang="less">
@import "/src/components/table/common";
</style>
